<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="环境准备Angular 2 是基于TypeScript开发的，Angular 2 开发环境的准备有下面几步：

安装Node.js
安装TypeScript
安装angular-cli

1. 安装Node.js安装Node.js分享的文章已经很多了，自行搜索。Node.js
2. 安装TypeScript安装TypeScript时一定要确保Node.js安装成功。安装的TypeScript版本一">
<meta property="og:type" content="article">
<meta property="og:title" content="第一个Angular 2 Application">
<meta property="og:url" content="http://www.sithome.vip/2017/01/26/first-angular2-app/index.html">
<meta property="og:site_name" content="SitHome">
<meta property="og:description" content="环境准备Angular 2 是基于TypeScript开发的，Angular 2 开发环境的准备有下面几步：

安装Node.js
安装TypeScript
安装angular-cli

1. 安装Node.js安装Node.js分享的文章已经很多了，自行搜索。Node.js
2. 安装TypeScript安装TypeScript时一定要确保Node.js安装成功。安装的TypeScript版本一">
<meta property="og:updated_time" content="2017-02-07T03:52:56.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="第一个Angular 2 Application">
<meta name="twitter:description" content="环境准备Angular 2 是基于TypeScript开发的，Angular 2 开发环境的准备有下面几步：

安装Node.js
安装TypeScript
安装angular-cli

1. 安装Node.js安装Node.js分享的文章已经很多了，自行搜索。Node.js
2. 安装TypeScript安装TypeScript时一定要确保Node.js安装成功。安装的TypeScript版本一">
    
    
        
          
              <link rel="shortcut icon" href="/images/favicon.ico">
          
        
        
          
            <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
          
        
        
          
            <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
          
        
    
    <!-- title -->
    <title>第一个Angular 2 Application</title>
    <!-- styles -->
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/lib/meslo-LG/styles.css">
    <link rel="stylesheet" href="/lib/justified-gallery/justifiedGallery.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <!-- rss -->
    
    
    <!-- jquery -->
    <script src="/lib/jquery/jquery.min.js"></script>
</head>

<body>
    
      <div id="header-post">
  <a id="menu-icon" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#"><i class="fa fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        
          <li><a href="/">主页</a></li>
        
          <li><a href="/about/">关于</a></li>
        
          <li><a href="/archives/">文章</a></li>
        
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" href="/2017/01/27/angular2-component-1/"><i class="fa fa-chevron-left" aria-hidden="true" onmouseover='$("#i-prev").toggle();' onmouseout='$("#i-prev").toggle();'></i></a></li>
        
        
        <li><a class="icon" href="/2016/07/19/markdown-start-fast/"><i class="fa fa-chevron-right" aria-hidden="true" onmouseover='$("#i-next").toggle();' onmouseout='$("#i-next").toggle();'></i></a></li>
        
        <li><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up" aria-hidden="true" onmouseover='$("#i-top").toggle();' onmouseout='$("#i-top").toggle();'></i></a></li>
        <li><a class="icon" href="#"><i class="fa fa-share-alt" aria-hidden="true" onmouseover='$("#i-share").toggle();' onmouseout='$("#i-share").toggle();' onclick='$("#share").toggle();return false;'></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://www.sithome.vip/2017/01/26/first-angular2-app/"><i class="fa fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&text=第一个Angular 2 Application"><i class="fa fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&is_video=false&description=第一个Angular 2 Application"><i class="fa fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=第一个Angular 2 Application&body=Check out this article: http://www.sithome.vip/2017/01/26/first-angular2-app/"><i class="fa fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&name=第一个Angular 2 Application&description="><i class="fa fa-tumblr " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#环境准备"><span class="toc-number">1.</span> <span class="toc-text">环境准备</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-安装Node-js"><span class="toc-number">1.1.</span> <span class="toc-text">1. 安装Node.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-安装TypeScript"><span class="toc-number">1.2.</span> <span class="toc-text">2. 安装TypeScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-安装angular-cli"><span class="toc-number">1.3.</span> <span class="toc-text">3. 安装angular-cli</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#创建Angular-2-Application"><span class="toc-number">2.</span> <span class="toc-text">创建Angular 2 Application</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#启动应用"><span class="toc-number">3.</span> <span class="toc-text">启动应用</span></a></li></ol>
    </div>
  </span>

</div>

    
    <div class="content index width mx-auto px2 my4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        第一个Angular 2 Application
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">SitHome</span>
      </span>
      
    <div class="postdate">
        <time datetime="2017-01-26T01:21:25.000Z" itemprop="datePublished">2017-01-26</time>
    </div>


      

    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <h1 id="环境准备"><a href="#环境准备" class="headerlink" title="环境准备"></a>环境准备</h1><p>Angular 2 是基于TypeScript开发的，Angular 2 开发环境的准备有下面几步：</p>
<ol>
<li>安装Node.js</li>
<li>安装TypeScript</li>
<li>安装angular-cli</li>
</ol>
<h2 id="1-安装Node-js"><a href="#1-安装Node-js" class="headerlink" title="1. 安装Node.js"></a>1. 安装Node.js</h2><p>安装Node.js分享的文章已经很多了，自行搜索。<a href="https://nodejs.org" target="_blank" rel="external">Node.js</a></p>
<h2 id="2-安装TypeScript"><a href="#2-安装TypeScript" class="headerlink" title="2. 安装TypeScript"></a>2. 安装TypeScript</h2><p>安装TypeScript时一定要确保Node.js安装成功。安装的TypeScript版本一定不要低于1.7。下面是安装最新版本TypeScript的命令。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install -g typescript</div></pre></td></tr></table></figure></p>
<p>如果安装指定版本的TypeScript，使用下面的命令。将version替换为你想安装的版本号。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm insatll -g typescript@version</div></pre></td></tr></table></figure></p>
<p><em>注：npm是随Node.js一起安装的。如果提示npm命令不存在，请确认Node.js安装正确安装。<br>Windows用户：上面的命令适用于Linux/macOS操作系统。如果想在Windows系统使用上面的命令可以安装<a href="https://www.cygwin.com" target="_blank" rel="external">Cygwin</a></em></p>
<h2 id="3-安装angular-cli"><a href="#3-安装angular-cli" class="headerlink" title="3. 安装angular-cli"></a>3. 安装angular-cli</h2><p>Angular 2 提供了angular-cli(command line interface)工具。可以使用ng命令创建、编译、构建、测试应用，并且可以启动服务等。下面是安装angular-cli的命令。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install -g angular-cli</div></pre></td></tr></table></figure></p>
<p>安装成功之后可以使用下面的命令验证是否安装成功。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ ng version</div></pre></td></tr></table></figure></p>
<p>结果会列出angular-cli的版本和Node.js的版本。</p>
<h1 id="创建Angular-2-Application"><a href="#创建Angular-2-Application" class="headerlink" title="创建Angular 2 Application"></a>创建Angular 2 Application</h1><p>经过上面的步骤环境已经准备好，使用下面的命令来创建应用。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ ng new helloworld</div></pre></td></tr></table></figure></p>
<p>输出结果如下图所示：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line">installing ng2</div><div class="line">  create .editorconfig</div><div class="line">  create README.md</div><div class="line">  create src/app/app.component.css</div><div class="line">  create src/app/app.component.html</div><div class="line">  create src/app/app.component.spec.ts</div><div class="line">  create src/app/app.component.ts</div><div class="line">  create src/app/app.module.ts</div><div class="line">  create src/assets/.gitkeep</div><div class="line">  create src/environments/environment.prod.ts</div><div class="line">  create src/environments/environment.ts</div><div class="line">  create src/favicon.ico</div><div class="line">  create src/index.html</div><div class="line">  create src/main.ts</div><div class="line">  create src/polyfills.ts</div><div class="line">  create src/styles.css</div><div class="line">  create src/test.ts</div><div class="line">  create src/tsconfig.json</div><div class="line">  create angular-cli.json</div><div class="line">  create e2e/app.e2e-spec.ts</div><div class="line">  create e2e/app.po.ts</div><div class="line">  create e2e/tsconfig.json</div><div class="line">  create .gitignore</div><div class="line">  create karma.conf.js</div><div class="line">  create package.json</div><div class="line">  create protractor.conf.js</div><div class="line">  create tslint.json</div><div class="line">Installing packages for tooling via npm.</div><div class="line">Installed packages for tooling via npm.</div><div class="line">Project &apos;helloworld&apos; successfully created.</div></pre></td></tr></table></figure></p>
<p><em>注：在Installing packages for tooling via npm会等待一段时间，不用着急等着就行。</em></p>
<p>可以进入目录看看都创建了什么，如下所示：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">├── README.md</div><div class="line">├── angular-cli.json</div><div class="line">├── e2e</div><div class="line">├── karma.conf.js</div><div class="line">├── node_modules</div><div class="line">├── package.json</div><div class="line">├── protractor.conf.js</div><div class="line">├── src</div><div class="line">└── tslint.json</div></pre></td></tr></table></figure></p>
<p>现在我们看看src下面是什么，如下所示：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">.</div><div class="line">├── app</div><div class="line">│   ├── app.component.css</div><div class="line">│   ├── app.component.html</div><div class="line">│   ├── app.component.spec.ts</div><div class="line">│   ├── app.component.ts</div><div class="line">│   └── app.module.ts</div><div class="line">├── assets</div><div class="line">├── environments</div><div class="line">│   ├── environment.prod.ts</div><div class="line">│   └── environment.ts</div><div class="line">├── favicon.ico</div><div class="line">├── index.html</div><div class="line">├── main.ts</div><div class="line">├── polyfills.ts</div><div class="line">├── styles.css</div><div class="line">├── test.ts</div><div class="line">└── tsconfig.json</div><div class="line"></div><div class="line">3 directories, 14 files</div></pre></td></tr></table></figure></p>
<p>使用编辑器打开index.html，内容如下所示：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">&lt;!doctype html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;head&gt;</div><div class="line">  &lt;meta charset=&quot;utf-8&quot;&gt;</div><div class="line">  &lt;title&gt;Helloworld &lt;/title&gt;</div><div class="line">  &lt;base href=&quot;/&quot;&gt;</div><div class="line"></div><div class="line">  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</div><div class="line">  &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">  &lt;app-root&gt;Loading...&lt;/app-root&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure></p>
<p>熟悉HTML的很容易理解index.html里的内容。<app-root>是应用要渲染的。Loading是一个占位符，当应用还没有加载完成时显示。</app-root></p>
<h1 id="启动应用"><a href="#启动应用" class="headerlink" title="启动应用"></a>启动应用</h1><p>我们不需要对应用做任何改动就可以启动起来。angular-cli有一个命令可以启动HTTP server服务,在应用的根目录，也就是上面创建的应用helloworld应用目录下，执行下面命令：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ng server</div></pre></td></tr></table></figure></p>
<p>会看到下面的输出结果<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">** NG Live Development Server is running on http://localhost:4200. **</div></pre></td></tr></table></figure></p>
<p>从输出结果很容易知道要访问<a href="http://localhost:4200" target="_blank" rel="external">http://localhost:4200</a>,访问之后，页面内容如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">app works!</div></pre></td></tr></table></figure></p>
<p>至此第一个应用已经启动起来，至于为什么结果是app works？先不要关心。待我继续学习学习…</p>

  </div>
</article>

    <div class="weixin">
      <p>欢迎关注微信SitHomeBing，互相交流学习</p>
      <p><img src="http://okhdvenip.bkt.clouddn.com/qrcode8.jpg" alt="SitHomeBing" title="微信扫二维码关注"></p>
    </div>





<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="2017/01/26/first-angular2-app/" data-title="第一个Angular 2 Application" data-url="http://www.sithome.vip/2017/01/26/first-angular2-app/"></div>
<!-- 多说评论框 end -->



    </div>
    
      <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">主页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">文章</a></li>
         
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#环境准备"><span class="toc-number">1.</span> <span class="toc-text">环境准备</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-安装Node-js"><span class="toc-number">1.1.</span> <span class="toc-text">1. 安装Node.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-安装TypeScript"><span class="toc-number">1.2.</span> <span class="toc-text">2. 安装TypeScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-安装angular-cli"><span class="toc-number">1.3.</span> <span class="toc-text">3. 安装angular-cli</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#创建Angular-2-Application"><span class="toc-number">2.</span> <span class="toc-text">创建Angular 2 Application</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#启动应用"><span class="toc-number">3.</span> <span class="toc-text">启动应用</span></a></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" href="http://www.facebook.com/sharer.php?u=http://www.sithome.vip/2017/01/26/first-angular2-app/"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://twitter.com/share?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&text=第一个Angular 2 Application"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.linkedin.com/shareArticle?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://pinterest.com/pin/create/bookmarklet/?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&is_video=false&description=第一个Angular 2 Application"><i class="fa fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=第一个Angular 2 Application&body=Check out this article: http://www.sithome.vip/2017/01/26/first-angular2-app/"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="https://getpocket.com/save?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://reddit.com/submit?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.stumbleupon.com/submit?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://digg.com/submit?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&title=第一个Angular 2 Application"><i class="fa fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="http://www.tumblr.com/share/link?url=http://www.sithome.vip/2017/01/26/first-angular2-app/&name=第一个Angular 2 Application&description="><i class="fa fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
      <ul>
        <li id="toc"><a class="icon" href="#" onclick='$("#toc-footer").toggle();return false;'><i class="fa fa-list fa-lg" aria-hidden="true"></i> TOC</a></li>
        <li id="share"><a class="icon" href="#" onclick='$("#share-footer").toggle();return false;'><i class="fa fa-share-alt fa-lg" aria-hidden="true"></i> Share</a></li>
        <li id="top" style="display:none"><a class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a></li>
        <li id="menu"><a class="icon" href="#" onclick='$("#nav-footer").toggle();return false;'><i class="fa fa-bars fa-lg" aria-hidden="true"></i> Menu</a></li>
      </ul>
    </div>

  </div>
</div>

    
    <footer id="footer">
  <div class="footer-left">
    Copyright &copy; 2017 SitHome
  </div>
  <div class="footer-right">
    <nav>
      <ul>
         
          <li><a href="/">主页</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/archives/">文章</a></li>
         
          <li><a href="https://git.oschina.net/sithome">码云</a></li>
        
      </ul>
    </nav>
  </div>
</footer>

    <script src="/lib/justified-gallery/jquery.justifiedGallery.min.js"></script>
<script src="/js/main.js"></script>
<!-- Google Analytics -->
<!--

    <script type="text/javascript">
        (function(i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-86660611-1', 'auto');
        ga('send', 'pageview');
    </script>

-->
<!-- Disqus Comments -->


<!--duoshuo comments-->

  <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
  <script type="text/javascript">
  var duoshuo_shortname = 'sithome';
  var duoshuoQuery = {short_name:duoshuo_shortname};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
       || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
  <!-- 多说公共JS代码 end -->


</body>
</html>
